<!DOCTYPE html>
<!--
  Copyright (c) 2011 Google Inc.
-->
<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>FusionTables Chart Wizard</title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['charteditor']});
    </script>

    <!-- Uncomment during development:
    <script type="text/javascript" src="../../closure-library/closure/goog/base.js">
    </script>
    -->

    <script type="text/javascript" src="ftchartconfig.js"></script>

    <script type="text/javascript" src="ftchartconfig_compiled.js"></script>
    
    <script type="text/javascript">
      var ftchartWiz;

      if (window.location.protocol == "file:") {
        alert('This script only works when loaded from a web server,' +
            ' not from a file on your computer.');
      }

      function onLoadGapi() {
        gapi.client.setApiKey('AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
        loadFtApi();
      }

      function loadFtApi() {
        gapi.client.load('fusiontables', 'v1', initialize);
      }

      function initialize() {
        ftchartWiz = new ftchartconfig(500, 300,
            'https://www.google.com/fusiontables');
        ftchartWiz.createZippies();
      }
    </script>

    <script type="text/javascript"
        src="https://apis.google.com/js/client.js?onload=onLoadGapi">
    </script>

    <link rel="stylesheet" href="style.css" type="text/css"></link>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-9117623-10']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ?
            'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </head>

  <body>
    <h1>Fusion Tables Chart Wizard</h1>

    <p class="intro">
      This wizard creates the code or URL you need to display a Fusion Tables
      chart on its own or embedded in another web page.
      <span>Note that the table must be
      <b>public or unlisted </b><u>and</u><b> exportable</b>. </span>
    <p>
    After configuring your chart, you will have three ways to use the chart: 
    </p>
    <ul>
      <li><a href="#headerURL">A URL you can use directly.</a></li>
      <li><a href="#headeriframe">
      The code for an iframe that you can include in a web page.</a></li>
      <li><a href="#headerHTML">
      The complete HTML code to create its own page.</a></li>
    </ul>
    </p>
    <p class="intro"> 
      Please report problems or feature requests in the 
      <a href="http://code.google.com/p/fusion-tables-api-samples/issues/list">
      Issue Tracker</a>
    </p>
    
    <div class="form-div">
      <h3 class="required">1. Enter table id and choose columns:</h3> 
      <div class="form-element">
        <label for="tableid">Enter encrypted table id (docid):</label>
        <input
          type="text" 
          id="tableid"
          value="" 
          class="right" 
          size="50" 
          onchange="ftchartWiz.fetchColumns()"/>
      </div>
      <br/>
      <div class="form-element">
        <table class="selecttable">
        <tr>
          <td class="picker"> 
          <select 
            id="selectColumns" 
            class="right" 
            disabled="disabled" 
            onchange="ftchartWiz.addremoveColumn()" >
            <option value="">
              --Select Column--
            </option>
          </select>
          </td>
          <td class="colList" id="selectedColumns"/>
        </tr>
        </table>
      </div>

      <h4 id="header1" class="option">
        2. Choose filter and sort criteria and number of rows to display
        in chart:
      </h4>
      <div id="content1">
        <br/>
      	<div class="form-element">
      	  <label for="filter">Filter: WHERE</label>
      	  <input 
            type="text" 
            id="filter" 
            size="50" 
            onchange="ftchartWiz.updateChart()"/>
          example expression: Country = 'USA' and 'Total Sales' > 100 
      	</div>
      	<div class="form-element">
      	  <label for="limit">Row LIMIT: </label>
      	  <input 
            type="number" 
            id="limit" 
            size="4" value="100" 
            onchange="ftchartWiz.updateChart()"/>
          By default, only the first 100 rows of data are displayed.
      	</div>
        <br/>
      	<div class="form-element">
      	  <label for="orderbyColumn">Order by column:</label>
      	  <select 
            id="orderbyColumn" 
            class="right" 
            disabled="disabled" 
            onchange="ftchartWiz.updateChart()">
      	    <option value="">
      	      --Select--
      	    </option>
      	  </select>
      	  <input 
            type="radio" 
            name="sortorder"
            value="ASC"
            checked="checked"
            onchange="ftchartWiz.updateChart()">
          Ascending
          </input>
      	  <input
            type="radio" 
            name="sortorder" 
            value="DESC" 
            id="sortdesc" 
            onchange="ftchartWiz.updateChart()">
          Descending
          </input>
      	</div>
      </div>
      <h4 id="header2" class="option"><img src="images/blank.gif"/>
        3. Advanced Options (summarize groups of rows, change formatting and
        column names)
      </h4>
      <div id="content2">
        <br/>
      	<div class="form-element">
      	  <label for="groupbyColumn">Column to group rows by:</label>
      	  <select id="groupbyColumn" class="right" disabled="disabled">
      	    <option value="">
      	      --Select--
      	    </option>
      	  </select>
      	</div>
      	<div class="form-element">
      	  <label for="sumbyColumn">Summarize values in this column:
          </label>
      	  <select 
            id="sumbyColumn" 
            class="right" 
            disabled="disabled" 
            onchange="ftchartWiz.addsummaryColumn()">
      	    <option value="">
      	      --Select--
      	    </option>
      	  </select>
          using 
      	  <input type="radio" name="sumtype" value="sum" checked="checked">
          sum</input>
      	  <input type="radio" name="sumtype" value="average" >average</input>
      	  <input type="radio" name="sumtype" value="min" >min</input>
      	  <input type="radio" name="sumtype" value="max" >max</input>
      	  <input type="radio" name="sumtype" value="count" >count</input>
      	</div>
        <br/>
        <div class="form-element">
          <table>
            <tr><td>
            Apply this format (see 
            <a href="http://code.google.com/apis/chart/interactive/docs/reference.html#formatters">
            format patterns</a>) 
            <input type="text" id="columnformat" size="10"/>to
            <select 
              id="selectformatColumns" 
              class="right" 
              disabled="disabled" 
              onchange="ftchartWiz.addformattoColumn()" >
              <option value="">
                --Column to format--
              </option>
            </select>
            </td>
            <td class="colList" id="formattedColumns"/>
            </tr><tr><td>
            H-axis format: 
            <input
              type="text" id="haxisformat" 
              size="10" onchange="ftchartWiz.updateChart()"/>
            </td></tr><tr><td>
            V-axis format: 
            <input
              type="text" id="vaxisformat" size="10"
              onchange="ftchartWiz.updateChart()"/> 
            </td></tr>
          </table>
        </div>
        <br/>
        <div class="form-element">
          Rename this column
          <select 
           id="selectrenameColumns" 
           class="right" disabled="disabled" 
           onchange="ftchartWiz.addnametoColumn()" >
            <option value="">
              --Select--
            </option>
          </select>
          as <input type="text" id="columnrename" size="20"/>
          (to undo, rename with a blank name)
          <br/>
        </div>
      </div>
      <br/>
      <h4 class="option">
         4. Click "Configure Chart" to use the Chart Editor 
      </h4>
      <table>
      <tr><td class="config">
      	<table>
        <tr><td colspan="2">      
          <input
            type="button" 
            id="ConfigureChart" 
            value="Configure Chart"
            class="config" onclick="ftchartWiz.openEditor()"/>
        </td></tr>
      	<tr><td>
      	   Width
      	</td><td>
      	   <input 
      	      type="text" 
      	      id="chartwidth" 
      	      class="short-input" 
      	      value="500" 
      	      onchange="ftchartWiz.updateChart()">px
      	</td></tr>
      	<tr><td>
      	    Height
      	</td><td>
      	    <input
      	      type="text" 
      	      id="chartheight" 
      	      class="short-input" value="400"
      	      onchange="ftchartWiz.updateChart()">px
      	</td></tr>
      	</table>
      </td>
      <td id='visualization'/>
      </tr>
      </table>

      <h3 id="headerURL" class="output">
        <img src="images/blank.gif"/>Your URL
      </h3>
      <textarea id="chartURL"></textarea>
      <h3 id="headeriframe" class="output">
        <img src="images/blank.gif"/>Your iframe
      </h3>
      <textarea id="chartiframe"></textarea>
      <h3 id="headerHTML" class="output">
        <img src="images/blank.gif"/>Your HTML
      </h3>
      <textarea id="htmlCode"></textarea>
  </body>

</html>
